import React,{ Component } from "react";
import {　Text,View,StyleSheet,TouchableOpacity,Dimensions,Image　} from "react-native";
import Swiper from 'react-native-swiper';
const { width, height } = Dimensions.get('window');
export default class SwiperJS extends Component {
    render(){
        return (
            <Swiper
                height={width * 40 / 100}
                showsButtons={false}
                removeClippedSubviews={false} //这个很主要啊，解决白屏问题
                autoplay={true}
                horizontal ={true}
                paginationStyle={styles.paginationStyle}
                dotStyle={styles.dotStyle}
                activeDotStyle={styles.activeDotStyle}
            >
                <TouchableOpacity onPress={()=>{
                    // navig.navigate('picture',{id:123})
                }}>
                    <Image source={require('../../res/image/15.jpg')} resizeMode="cover" style={styles.bannerImg} />
                </TouchableOpacity>
                <Image source={require('../../res/image/16.jpg')} resizeMode="cover" style={styles.bannerImg} />
                <Image source={require('../../res/image/177.jpg')} resizeMode="cover" style={styles.bannerImg} />
                <Image source={require('../../res/image/18.jpg')} resizeMode="cover" style={styles.bannerImg} />
            </Swiper>
        )
    }
}

const styles = StyleSheet.create({
    paginationStyle: {
        bottom: 6,
    },
    dotStyle: {
        width: 22,
        height: 3,
        backgroundColor: '#fff',
        opacity: 0.4,
        borderRadius: 0,
    },
    activeDotStyle: {
        width: 22,
        height: 3,
        backgroundColor: '#fff',
        borderRadius: 0,
    },
});